
<!-- /PAGE HEADER -->
<!-- FORMS -->
<div class="col-md-12">
	<!-- BOX -->
	<div class="box border green">
		<div class="box-title">
			<h4><i class="fa fa-table"></i>新闻分类列表</h4>
			<div class="tools hidden-xs">
				<a href="#box-config" data-toggle="modal" class="config">
					<i class="fa fa-cog"></i>
				</a>
				<a href="javascript:;" class="reload">
					<i class="fa fa-refresh"></i>
				</a>
				<a href="javascript:;" class="collapse">
					<i class="fa fa-chevron-up"></i>
				</a>
				<a href="javascript:;" class="remove">
					<i class="fa fa-times"></i>
				</a>
			</div>
		</div>
		<div class="box-body">
			<div id="datatable1_wrapper" class="dataTables_wrapper form-inline" role="grid">
			<div class="row">
			<div class="col-sm-12">
			<div class="pull-right">
				<div class="dataTables_filter" id="datatable1_filter">
					<label>
						<input aria-controls="datatable1" placeholder="Search" class="form-control input-sm" type="text">
					</label>
				</div>
			</div>
				<div class="pull-left">
					<div id="datatable1_length" class="dataTables_length">
					<label>Show
						<select size="1" name="datatable1_length" aria-controls="datatable1" class="form-control input-sm">
							<option value="10" selected="selected">10</option>
							<option value="25">25</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select>
					Rows</label>
					</div>
					</div>
				<div class="clearfix"></div>
			</div>
			</div>
			<table  width="" id="datatable1" class="datatable table table-striped table-bordered table-hover dataTable" aria-describedby="datatable1_info" cellspacing="0" cellpadding="0" border="0">
				<thead>
					<tr role="row">
						<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 150px;" >ID</th>
						<th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="Browser: activate to sort column ascending">权限名称
						</th>
						<th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 400px;" aria-label="Browser: activate to sort column ascending">权限规则
						</th>
						<th class="sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 150px;" aria-label="Browser: activate to sort column ascending">pid
						</th>
						<th class="hidden-xs sorting" role="columnheader" tabindex="0" aria-controls="datatable1" rowspan="1" colspan="1" style="width: 352px;" aria-label="Platform(s): activate to sort column ascending">操作
						</th>

					</tr>
				</thead>

			<tbody role="alert" aria-live="polite" aria-relevant="all">
				<!-- 借助php把数据输出来 -->
				<?php foreach($power as $v): ?>
				<tr level="1" class="gradeA odd" pid="<?php echo $v['pid']?>">
						<td class="  sorting_1"><?php echo $v['id']?></td>
						<td filed="title" class="db_edit">

						<button id="<?php echo $v['id']?>" class="btn btn-purple">+</button>
						<?php echo $v['name']?></td>
						<td class="center "><?php echo $v['rule']?></td>
						<td class="center "><?php echo $v['pid']?></td>
						<td class="hidden-xs ">
							<a  href="index.php?&admin=1&c=power&a=edit&id=<?php echo $v['id']?>" class="btn btn-info"><i class="fa fa-pencil-square-o"></i> 编辑</a>
							<a  href="index.php?&admin=1&c=power&a=del&id=<?php echo $v['id']?>"  onclick="return confirm('真的要删除吗？')" class="btn btn-danger del">
								<i class="fa fa-trash-o"></i> 删除
							</a>
						</td>
					</tr>
				<?php endforeach; ?>
				</tbody>
			</table>
					<div class="row">
						<div class="col-sm-12">
							<div class="pull-left">
							   <div class="dataTables_info" id="datatable1_info">Showing 1 to 10 of 57 entries</div>
							</div>
							<div class="pull-right">
								<div class="dataTables_paginate paging_bs_full" id="datatable1_paginate">
									<ul class="pagination">

									</ul>
								</div>
							</div>
							<div class="clearfix">

							</div>
						</div>
					</div>
					</div>
		</div>
	</div>
	<!-- /BOX -->
</div>

<script src="resources/admin/js/jquery/jquery-2.0.3.min.js"></script>
<script  type="text/javascript" >
$(function(){
	$("tbody").on('click','.btn',function() {
		var obj=$(this);

		//当前操作的button的tr对象
		//       obj==button parent()==td parent()==tr
		var tr_obj=$(this).parent().parent();//tr_obj当前点击的按钮的父级的父级

		var pid=tr_obj.attr('pid');//获取当前行的pid属性值

		//获取当前对象集合里面对应传递的对象的下标值

		//三个tr里面找到tr_obj对象，即第二个tr，再把第二个tr的下标返回
		var index=$('tr[pid='+pid+']').index(tr_obj);
		//获取当前同级tr标签的长度
		var len=$('tr[pid='+pid+']').length-1;

		//console.log($('tr[pid='+pid+']').index(tr_obj));
		var id=$(this).attr('id');//获取自定义属性的id值
		if('+'==$(this).text()){//判断点击的按钮是+还是-
			//获取自定义等级，优化子级缩进问题 先在tr那里定义level=1
			var level=parseInt(tr_obj.attr('level'));//获取tr标签的level的属性
				left=level*40;
				level++;
			$(this).text('-');
			$.ajax({
				url: 'index.php?c=power&a=list&admin=1&id='+id,
				type: 'get',
				dataType:'json',
				success:function(json){
					var html='';
					for(i in json){
						html+='<tr level="'+level+'" pid="'+id+'" class="gradeA odd">';
							html+='<td class="  sorting_1">'+json[i].id+'</td>';
							html+='<td  filed="title" class="db_edit">';
							html+='<button id="'+json[i].id+'" style="margin-left:'+left+'px;" class="btn btn-purple">+</button>&nbsp;&nbsp;'+json[i].name+'</td>';
								html+='<td class="center ">'+json[i].rule+'</td>';
							html+='<td class="center ">'+json[i].pid+'</td>';
							html+='<td class="hidden-xs ">';
								html+='<a  href="index.php?&admin=1&c=power&a=edit&id='+json[i].id+'" class="btn btn-info"><i class="fa fa-pencil-square-o"></i> 编辑</a>';
				html+='<a href="index.php?&admin=1&c=power&a=del&id='+json[i].id+'"  onclick="return confirm(真的要删除吗？)" class="btn btn-danger del"><i class="fa fa-trash-o"></i> 删除</a>';
							html+='</td>';
						html+='</tr>';
					}

					//console.log($('tr[pid='+pid+']').length);//$('tr[pid='+pid+']')抓取所有同级的对象
					//$('tr[pid='+pid+']');//获取属性值医德的tr标签
					//获取当前tr的下标
					// console.log($('tr[pid='+pid+']').index($(this)));
					 if (len==index) {
					 	html+='<tr pid="'+pid+'" style="display:none"></tr>';
					 }
					//给父级的后面添加内容
					tr_obj.after(html);//after在被选元素的外部的尾部加上元素
				}
			})

		}else{
			$(this).text('+');
			//方法一：
			var pid=tr_obj.attr('pid');
			//抓取当前操作按钮的父级tr标签，从该标签开始查找到下一个符合pid=0(nextUntil('tr[pid=0]'))的tr标签，然后把这两个tr之前的内容删除remove()
			// nextUntil() 查找当前元素到下一个指定的符合条件的的同辈元素
			tr_obj.nextUntil('tr[pid='+pid+']').remove();
		}
	})
})
</script>